<script setup>
	import {
		ref,
		reactive,
	} from 'vue';

	import {
		ElMessage
	} from 'element-plus'

	// import api from '@/api/api';
	// import util from '@/utils/util';
	import config from '@/utils/config.js';

	// 参数接收
	// const props = defineProps({
	// 	info: {
	// 		type: Object,
	// 		default: () => {
	// 			return {};
	// 		},
	// 	},
	// })

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();
	const token = localStorage.getItem('token');

	// 上传失败
	function handleError(e) {
		console.log('handleError', e);
	}

	// 文件类型限制JPG/JPEG/PNG
	const fileType = reactive(['png', 'jpg', 'jpeg']);
	// 准备上传
	function beforeUpload(file) {

		// 校检文件类型
		const fileName = file.name.split('.');
		const fileExt = fileName[fileName.length - 1];
		const isTypeOk = fileType.indexOf(fileExt) >= 0;
		if (!isTypeOk) {
			ElMessage.error(`文件格式不正确, 请上传${fileType.join("/")}格式文件!`);
			return false;
		}

		const isLt10M = file.size / 1024 / 1024 < 10;
		if (!isLt10M) {
			ElMessage.error('上传附件大小不能超过 10MB!');
		}

		return isLt10M;
	}

	// 上传成功
	function handleSuccess(response, file, fileList) {
		// console.log('success response', response);
		// console.log('success file', file);

		file = {
			url: response.fileName,
		}
		// console.log('success fileList', fileList);
	}

	// 当超出限制时，执行的钩子函数
	function handleExceed() {
		ElMessage.warning('超出可上传限制')
	}

	// 预览
	const dialogVisible = ref(false)
	const dialogImageUrl = ref('')
	// 预览
	function handlePictureCardPreview(file) {
		dialogImageUrl.value = file.url || '';
		dialogVisible.value = true
	}

	// 回调
	const emit = defineEmits(["change"]);
</script>

<template>
	<el-upload list-type="picture-card" :limit="1" v-model:file-list="modelValue"
		:action="`${config.host}/common/upload`" :headers="{
				'Authorization': `Bearer ${token}`}" :before-upload="beforeUpload" :on-error="handleError"
		:on-success="handleSuccess" :auto-upload="true" :on-preview="handlePictureCardPreview" :on-exceed="handleExceed"
		style="width: 100%;">
		<el-icon>
			<Plus />
		</el-icon>
	</el-upload>

	<el-dialog v-model="dialogVisible">
		<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%;" />
	</el-dialog>
</template>

<style lang="scss" scoped>
</style>